import { Table, Button, Col, Row, message, Pagination } from 'antd';
import styles from './index.module.scss'
import { SearchOutlined } from '@ant-design/icons'
import { current } from '@reduxjs/toolkit';
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import PopPage from './Pop'
import { getMessage } from '@/service'
import { TimeConversion } from "@/utils";

export default (props) => {
    const { t, i18n } = useTranslation();
    const [messageApi, contextHolder] = message.useMessage();
    const initState = () => ({
        messageList: [],
        pageNo: 1,
        pageSize: 10,
        total: '',
        addVisible: false,
        loading: false
    }),
        [state, setState] = useState(initState);
    const columns = [
        {
            title: t('menu.notiveALl.table.order'),
            //    dataIndex: 'index',
            width: 80,
            render: (text, record, index) => index + 1,
        },
        {
            title:  t('menu.notiveALl.table.title'),
            dataIndex: 'title',
            width: 200,
        },
        {
            title:  t('menu.notiveALl.table.content'),
            dataIndex: 'content',
            width: 400,
            ellipsis: true,
        },
        {
            title:  t('menu.notiveALl.table.acceptTime'),
            width: 150,
            dataIndex: 'createTime',
            render(_col, item) {
                return TimeConversion(item.createTime)
            },
        },
    ];
    const handlePageChange = (page) => {
        setState(prevParams => ({ ...prevParams, pageNo: page }));
    };
    const handlePageSizeChange = (pageNo, pageSize) => {
        setState(prevParams => ({ ...prevParams, pageNo, pageSize }));
    };
    const goAddList = () => {
        setState(prevParams => ({ ...prevParams, addVisible: true }));
    };
    const closeModalAndUpdate = (newValue) => {
        setState(prevParams => ({ ...prevParams, addVisible: false }));
        getMessageList();
    };
    const getMessageList = () => {
        setState(prevState => ({ ...prevState, loading: true }));
        let params = {
            pageNo: state.pageNo,
            pageSize: state.pageSize,
        }
        getMessage(params).then(res => {
            if (res.code == 0) {
                setState(o => ({
                    ...o,
                    messageList: res?.data?.records || [],
                    total: res?.data?.total || 0,
                    loading: false
                }));
            } else {
                messageApi.open({
                    type: 'error',
                    content: res?.message,
                });
                setState(prevState => ({ ...prevState, loading: false }));
            }
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
            setState(prevState => ({ ...prevState, loading: false }));
        });
    }
    useEffect(() => {
        getMessageList();
    }, [state.pageNo, state.pageSize, i18n.language]);
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.tableCount}>
                    <Row className={styles.titBlock}>
                        <Col span={12}>
                            <div className='custom-title'>{t('menu.notiveALl.title')}</div>
                        </Col>
                        <Col className={styles.RightBlcok} span={12}>
                            <Button type='primary' className='custom-btn-primary' onClick={goAddList} >{t('menu.notiveALl.addBtn')}</Button>
                        </Col>
                    </Row>
                    <Table loading={state.loading} rowKey={'id'} scroll={{ x: '100%' }} className='custom-table' pagination={false} columns={columns} dataSource={state.messageList} />
                    <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => t('common.pagination.totalNum', { totalNum })}
                            align="center"
                            current={state?.currentPage}
                            defaultPageSize={state?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div>
                </div>
            </div>
            {<PopPage visible={state?.addVisible} onClose={closeModalAndUpdate} />}
            {contextHolder}
        </div>
    )
}